.Q-calendar-change-enter-active,
.Q-calendar-change-leave-active {
  transition: opacity 0.5s;
}

.Q-calendar-change-enter,
.Q-calendar-change-leave-to
  {
  opacity: 0;
}

.Q-calendar {
  width: 100%;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  background-color: #ffffff;
  color: #000;
  user-select: none;
  border: 1px solid #4152b3;

  .Q-calendar-title {
    height: 50px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;

    div {
      align-self: center;
    }

    .Q-calendar-button,
    .top {
      align-self: center;
    }

    .Q-calendar-title-box {
      width: calc((100% / 7) * 2);
      display: flex;
      justify-content: space-around;
      cursor: default;

      .Q-calendar-title-box-text {
        width: 50%;
        text-align: center;
        align-self: center;
      }
      .Q-calendar-title-box-text:hover {
        color: #4152b3;
        font-weight: 700;
      }
    }
    .Q-calendar-title-box-padding{
      padding-left: 18px;
    }
    .Q-calendar-title-box-center{
      margin: 0 auto;
      font-weight: 700
    }
  }
  .Q-calendar-day {
    height: calc(100% - 50px);
    /* 周末 */
    .Q-calendar-week {
      display: flex;
      justify-content: inherit;
      cursor: default;

      p {
        display: flex;
        justify-content: center;
        width: calc(100% / 7);
        box-sizing: border-box;
      }
    }
    /* 日历内容 */
    .Q-calendar-box {
      display: flex;
      justify-content: inherit;
      flex-wrap: wrap;
      width: 100%;
      height: 80%;

      div:hover {
        color: yellowgreen;
        font-weight: 700;
      }

      .Q-calendar-current-month {
        box-sizing: border-box;
        cursor: default;

      }

      .Q-calendar-current-month:hover {
        color: #4152b3;
        font-weight: 700;
        font-size: 20px;
      }

      div {
        display: flex;
        justify-content: center;
        width: calc(100% / 7);
        height: calc(100% / 7);

        span {
          margin: auto;
        }
      }

      p {
        display: flex;
        justify-content: center;
        width: calc(100% / 7);
      }
    }
  }

  .Q-calendar-years {
    height: calc(100% - 50px);

    .Q-calendar-years-box {
      // border: 1px solid pink;
      display: flex;
      justify-content: inherit;
      flex-wrap: wrap;
      height: 98%;

      div {
        display: flex;
        box-sizing: border-box;
        justify-content: center;
        width: calc(100% / 4);
        height: calc(100% / 4);

        span {
          margin: auto;
        }
      }

      div:hover {
        font-weight: 700;
        color: yellowgreen;
      }
    }
  }
}

/* //非本月时间内，或非本年内 */
.Q-calendar-surplus {
  color: #898989;
}

.nowCss {
  // border:1px solid pink;
  background: #f1f3f4;
  color: #40b8ff;
}

.Q-calendar-checked {
  span {
    color: var(--Q-calendar-color);
    background-color: var(--Q-calendar-background-color);
    border-radius: 10px;
    width: 50%;
    height: 50%;
    text-align: center;
    line-height: 24px;
  }
}